<template>
    <!--帮助中心  -->
    <div class="support">
      <div class="support_title">会员介绍</div>
      <div style="font-size: 15px;text-align: left;" v-html="content"></div>
      <!-- <el-table
        :data="tableData"
        :header-cell-style="{fontSize: '15px', backgroundColor: '#EFEFEF',color:'#333'}"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="会员权益"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="服务说明"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="服务价格">
        </el-table-column>
        <el-table-column
          prop="address"
          label="开通状态">
        </el-table-column>
        <el-table-column
          prop="address"
          label="会员期限">
        </el-table-column>
      </el-table>
      <div class="account-vip-list">
        <div class="account-vip-list-name">推广服务</div>
        <div class="account-vip-list-flex">
          <div class="account-vip-list-flex-name">移动端网络广告定制推广服务，详询您的专属客户经理或在线客服。</div>
          <div class="account-vip-list-flex-icon" @click.stop="lianxi_status = !lianxi_status">
            <img src="@/assets/marketing/kefu_icon@2x.png" />
          </div>
        </div>
      </div> -->
      <!-- 平台合作 -->
      <div class="platform" v-if="lianxi_status">
        <div class="connect">扫描下方二维码添加微信</div>
        <div class="wechat" :key="item">
          <img :src="qrcode | urlLoad" alt="" class="image" />
          <!-- <span>联系电话：{{ phone }}</span> -->
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
          qrcode: "",
          lianxi_status: true,
          content: ""
      };
    },
    created() {
      this.connectServices()
      this.textProtocol()
    },
    methods: {
        async textProtocol() {
          let res = await this.$apiFun.textProtocol(1);
          this.content = res.result.rightsAndInterests
        },
        // 联系客服
        async connectServices() {
          let params = {};
          let res = await this.$apiFun.connectServices(params);
          // this.supportList = res.result.rows;
          if (res.code == 200) {
            this.qrcode = res.result.customerServiceQrCode;
          }
        }
    },
  };
  </script>
  
  <style lang="less" scoped>
  .support {
    min-height: auto;
    background: #ffffff;
    box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
    border-radius: 10px;
    padding: 0.3rem 0.5rem;
    .support_title {
      text-align: left;
      font-size: 0.24rem;
      font-weight: bold;
      color: #333333;
      margin-bottom: 20px;
    }
    .support_content {
      text-align: left;
      font-size: 0.22rem;
      font-weight: 400;
      // text-decoration: underline;
      color: #000;
      margin-top: 0.3rem;
      cursor: pointer;
      &:hover{
        color: #f42551;
      }
    }
    .el-pagination {
      position: relative;
      top: 0;
      text-align: left;
      margin-top: 0.4rem;
      // padding-left: 0.3rem;
      display: flex;
    }
  }
  // 分页样式
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #f42551;
  }

  .account-vip-list {
    width: calc(100% - 80px);
    height: auto;
    padding: 14px 40px;
    display: flex;
    background: #EFEFEF;
    margin-top: 50px;
  }
  .account-vip-list-name {
    width: auto;
    height: auto;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 15px;
    color: #F42551;
    display: flex;
    align-self: center;
  }
  .account-vip-list-flex {
    width: auto;
    height: auto;
    display: flex;
    align-self: center;
    margin-left: 84px;
  }
  .account-vip-list-flex-name {
    width: auto;
    height: auto;
    font-family: Microsoft YaHei;
    font-weight: 300;
    font-size: 15px;
    color: #333333;
    display: flex;
    align-self: center;
  }
  .account-vip-list-flex-icon {
    width: 24px; height: 24px;
    display: flex; align-self: center;
    margin-left: 18px;
    cursor: pointer;
  }
  // 平台合作
  .platform {
      margin-top: 6%;
      font-family: Microsoft YaHei;
      .connect {
        font-size: 0.22rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        // font-weight: bold;
        color: #333333;
        margin-bottom: 30px;
      }
      .wechat {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 22px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 30px;
        .image {
          width: 2.8rem;
          height: 2.8rem;
          margin: 0 0 0.3rem 0;
        }
      }
    }
  </style>